<template>
    <l-page class="pb-3 block">
        <l-navbar title="月供计算器" />
        <view class="panel" v-if="!computedFrom.show">
            <l-select label="贷款类型" :list="monthlyTypes.list" v-model="monthlyTypes.active" />
            <!-- 商业贷款 -->
            <template v-if="monthlyTypes.active == 0">
                <business @submit="submit" ref="businessFrom" />
            </template>
            <!-- 公积金贷款 -->
            <template v-if="monthlyTypes.active == 1">
                <accumulation @submit="submit" ref="accumulationFrom" />
            </template>
            <!-- 组合贷款 -->
            <template v-if="monthlyTypes.active == 2">
                <group @submit="submit" ref="groupFrom" />
            </template>

            <l-button type="primary" class="mt-3" @tap="save">开始计算</l-button>
        </view>
        <view v-else>
            <allPay :formData="computedFrom.data" v-if="computedFrom.tab == 'allPay'" />
            <pay :formData="computedFrom.data" v-if="computedFrom.tab == 'pay'" />
        </view>

    </l-page>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import business from "./components/business.vue";
import accumulation from "./components/accumulation.vue";
import group from "./components/group.vue";
import allPay from "./components/all-pay.vue";
import pay from "./components/pay.vue";

let monthlyTypes = reactive({
    list: ['商业贷款', '公积金贷款', '组合贷款'].map((item, idx) => ({ value: idx, label: item })),
    active: 0
})
let show1 = ref(false), show2 = ref(false);
const businessFrom = ref(), accumulationFrom = ref(), groupFrom = ref();
const save = () => {
    let form = {
        0: businessFrom.value,
        1: accumulationFrom.value,
        2: groupFrom.value,
    }
    form[monthlyTypes.active as keyof typeof form].submit()
}

const computedFrom = reactive({
    show: false,
    tab: "allPay",
    data: {}
})
const submit = (obj: any, type: number | undefined) => {
    computedFrom.show = true;
    computedFrom.data = obj;
    if (type == 1) {
        computedFrom.tab = 'allPay'
    } else {
        computedFrom.tab = 'pay'
    }

}
</script>
<style setup lang="scss">
.l-table {
    display: grid;
    grid-template-columns: repeat(4, auto);
    text-align: center;
    $len: 1, 2, 3, 4;

    @each $i in $len {
        .span-#{$i} {
            grid-column: span $i;
            @apply border border-gray-300 p-1.5;
        }
    }

}
</style>